class Detail {
    constructor() {

    }
    init() {
        // 1.获取地址栏sid，默认返回1
        let sid = location.search.substring(1).split('=')[1];
        if (!sid) {
            sid = 1;
        }
        console.log(sid);

        // 2.将获取的sid传给后端，后端返回对应的数据。
        $.ajax({
            url: 'http://localhost/lining/backend/detail.php',
            data: {
                sid: sid
            },
            dataType: 'json'
        }).then(function(resData) {
            $('#spic img').attr('src', resData.url);
            $('#sp img').attr('src', resData.url);

            $('#bpic').attr('src', resData.url);
            $('.loadtitle').html(resData.title);
            $('.loadpcp').html(resData.price);

            // 渲染小图
            let arrPic = resData.piclist.split(',');
            let strHtml = '';
            $.each(arrPic, function(index, value) {
                strHtml += `
          <li>
            <img src="${value}"/>
          </li>
        `;
            });
            $('#list ul').html(strHtml);


            // 放大镜效果
            $('#spic').hover(function() {
                $('#sf').css('visibility', 'visible');
                $('#bf').css('visibility', 'visible');
                $('#sf').width($('#spic').width() * $('#bf').width() / $('#bpic').width());
                $('#sf').height($('#spic').height() * $('#bf').height() / $('#bpic').height());
                let bili = $('#bpic').width() / $('#spic').width();
                // 3.小放跟随鼠标移动
                $('#spic').on('mousemove', function(e) {
                    let leftValue = e.pageX - $('.wrap').offset().left - $('#sf').width() / 2;
                    let topValue = e.pageY - $('.wrap').offset().top - $('#sf').height() / 2;
                    if (leftValue < 0) {
                        leftValue = 0;
                    } else if (leftValue >= $('#spic').width() - $('#sf').width()) {
                        leftValue = $('#spic').width() - $('#sf').width()
                    }
                    if (topValue < 0) {
                        topValue = 0;
                    } else if (topValue >= $('#spic').height() - $('#sf').height()) {
                        topValue = $('#spic').height() - $('#sf').height()
                    }
                    $('#sf').css({
                        left: leftValue,
                        top: topValue
                    });
                    $('#bpic').css({
                        left: -leftValue * bili,
                        top: -topValue * bili
                    });
                });
            }, function() {
                $('#sf').css('visibility', 'hidden');
                $('#bf').css('visibility', 'hidden');
            });

            // 切换小图
            $('#list li').on('mouseover', function() {
                let url = $(this).find('img').attr('src');
                $('#spic img').attr('src', url);
                $('#bpic').attr('src', url);
            });


            // 第一步，判断数量框
            $('#count').on('input', function() {
                let reg = /^[1-9]\d*$/;
                if (!reg.test($(this).val())) {
                    $(this).val(1);
                }
            });
            let localObj = {};

            function localToObj() {
                if (localStorage.getItem('localgoods')) {
                    localObj = JSON.parse(localStorage.getItem('localgoods'));
                } else {
                    localObj = {};
                }
            }
            $('.p-btn a').on('click', function() {
                localToObj();
                if (Object.keys(localObj).includes('localsid' + sid)) {
                    localObj['localsid' + sid] = parseInt($('#count').val()) + parseInt(localObj['localsid' + sid]);
                } else {
                    localObj['localsid' + sid] = $('#count').val();
                }
                localStorage.setItem('localgoods', JSON.stringify(localObj));
                alert('已加入购物车')
            });
        });
    }
}
export {
    Detail
}